<template>
	<view class="container category-container">
		<view class="goods-main">
			<view class="goods-left">
				<view class="goods-type" :class="pageCode===item.id&&'goods-type-active'" v-for="item in pageList"
					:key="item.id" @click="clickType(item.id)">
					{{item.name}}
				</view>
			</view>
			<scroll-view id="myScrollView" scroll-y :scroll-top="scrollTop" class="goods-right"
				@scroll="recordScrollTop">
				<view :id="'goodsCode'+item.id" class="goods-panel" v-for="item in pageList" :key="item.id">
					<view class="type-title" @click="jump('/pages/category/goodsList?level1='+item.id)">
						{{item.name}}
						<text class="iconfont">&#xe775;</text>
					</view>
					<view class="goods-list-panel">
						<view class="goods-list" v-for="child in item.children"
							@click="jump('/pages/category/goodsList?level1='+item.id+'&level2='+child.id)" :key="child.id">
							<image class="goods-img" :src="child.picture" mode="aspectFill" @error="$handleImageError(child,'picture')"></image>
							<view class="goods-title no-warp">{{child.name}}</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import api from '../../common/api';
	import { hideLoading, showLoading } from '../../common/util';
	const pageList = ref<any[]>([])
	const pageCode = ref('1')
	const scrollTop = ref(0)
	const clickType = async (type : string) => {
		pageCode.value = type
		// 获取容器信息
		const containerInfo : any = await getRect('#myScrollView');
		// 获取目标元素信息
		const targetInfo : any = await getRect('#goodsCode' + type);
		if (containerInfo && targetInfo) {
			// 计算元素在容器内的相对位置
			const relativeTop = targetInfo.top - containerInfo.top;
			// 设置滚动位置（需加上容器当前滚动量）
			scrollTop.value = currentScrollTop + relativeTop;
		}
	}
	const jump = (url) => {
		uni.navigateTo({
			url
		})
	}
	const getRect = (selector) => {
		return new Promise(resolve => {
			uni.createSelectorQuery()
				.select(selector)
				.boundingClientRect((res : any) => {
					resolve(res || null);
				})
				.exec();
		});
	}
	let currentScrollTop = 0
	const recordScrollTop = (e) => {
		currentScrollTop = e.detail.scrollTop;
	}


	onMounted(async () => {
		getPageList()

	})
	const getPageList = async () => {
		showLoading()
		try {
			const res = await api.findGoodsClassify({})
			const rows = res.data?.rows || [];
			const data = {};
			rows.forEach((item) => {
				if (item.level === "一级") {
					if (data[item.id]) {
						data[item.id].name = item.name;
					} else {
						data[item.id] = {
							id: item.id,
							name: item.name,
							children: [],
						};
					}
				} else {
					if (data[item.parentId]) {
						data[item.parentId].children.push({ id: item.id, name: item.name,picture:item.picture });
					} else {
						data[item.parentId] = {
							id: item.parentId,
							name: "",
							children: [{ id: item.id, name: item.name,picture:item.picture }],
						};
					}
				}
			});
			const dataArr : any[] = [];
			for (let i in data) {
				dataArr.push(data[i]);
			}

			pageCode.value = dataArr[0].id
			pageList.value = dataArr
		} finally {
			hideLoading()
		}
	}
</script>

<style lang="scss">
	.category-container {

		.goods-main {
			height: 100vh;
			background-color: #F6F6F6;
			display: flex;
		}

		.goods-left {
			display: inline-block;
			vertical-align: top;
		}

		.goods-right {
			display: inline-block;
			border-left: solid 1px #EDEDED;
			height: 100%;
			overflow: auto;
			max-height: 100%;
		}

		.goods-panel {
			background-color: #fff;
			padding: 15rpx;
			margin-bottom: 20rpx;
		}

		.goods-type {
			height: 80rpx;
			width: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #1E1E1E;
		}

		.goods-type-active {
			background-color: #fff;
			color: #49D48B;
		}

		.type-title {
			height: 66rpx;
			display: flex;
			align-items: center;
			//justify-content: space-between;
			font-weight: 500;
			font-size: 28rpx;
			color: #1E1E1E;
			.iconfont{
				font-size: 24rpx;
			}
		}

		.goods-list {
			display: inline-block;
			width: 31%;
			margin-bottom: 10rpx;
			padding: 20rpx 0;
			margin-right: 2%;
			text-align: center;
		}

		.goods-list:nth-child(3n) {
			margin-right: 0;
		}

		.goods-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}

		.goods-title {
			font-size: 26rpx;
			margin-top: 10rpx;
			color: #333;
		}



	}
</style>